<template>
	<view>
		<view style="display: flex;flex-wrap: wrap;">
			<view style="width: 180rpx;height: 180rpx;margin-top: 10rpx;margin-left: 7rpx;">
				<image style="width: 100%;height: 180rpx;" src="../../static/my/addPhoto.png" mode="aspectFill"
					@click="opneShow =true"></image>
			</view>
			<view v-for="(item,index) in List" :key="index"
				style="width: 180rpx;height: 180rpx;margin-top: 10rpx;margin-left: 7rpx;">
				<image style="width: 100%;height: 180rpx;" :src="item.url" mode="aspectFill"
					@click="preview(item,index)" v-if="item.type =='image'"></image>
				<view class="" v-else>
					<video :src="item.url" controls style="width: 100%;height: 180rpx;" id="videoId" @play="play"
						@fullscreenchange="fullscreenchange"></video>
				</view>

			</view>
		</view>
		<u-action-sheet :list="opneList" v-model="opneShow" :cancel-btn="true" @click="click"></u-action-sheet>
		<!-- 弹出层 -->
		<view>
			<u-action-sheet :list="list" v-model="show" cancel-btn @click="listClick"></u-action-sheet>
		</view>
		<view>
			<u-modal v-model="showModal" mask-close-able :content="content" show-cancel-button
				@confirm="delPic"></u-modal>
		</view>
		<view>
			<u-modal v-model="showModal1" mask-close-able :content="content1" show-cancel-button
				@confirm="zhuYePic"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showModal: false,
				showModal1: false,
				content: '确定要删除吗?',
				content1: '确定要选为主页照片吗?',
				// 弹出选择的列表
				list: [{
					text: '选为主页照片'
				}, {
					text: '查看大图'
				}, {
					text: '删除',
					color: 'red'
				}],
				// 图片列表
				List: [],
				src: '',
				url: '',
				current: '',
				opneList: [{
						text: '照片'
					},
					{
						text: '视频'
					}
				],
				opneShow: false,
				videoPlay: false,
				videoUrl: '',
				videoContext: ''
			}
		},
		onShow() {
			this.showPhoto();
		},
		onLoad() {

		},
		methods: {
			// 播放时进入全屏
			play(index) {
				this.videoContext = uni.createVideoContext('videoId')
				this.videoContext.requestFullScreen()
			},

			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},








			click(e) {
				console.log(e)
				if (e == 0) {
					this.addPhoto()
				} else {
					this.addVideo()
				}
			},





			// 点击选择列表事件
			listClick(index) {
				// //console.log(this.current,this.url);
				if (index == 0) {
					this.showModal1 = true;
				} else if (index == 1) {
					// 新建一个存放预览图片的空数组
					var imgArr = []
					imgArr.push(this.url);
					uni.previewImage({
						urls: imgArr,
						current: imgArr[0],
					});
				} else if (index == 2) {
					this.showModal = true;
				} else {
					return;
				}
			},
			// 选为主页照片
			zhuYePic() {
				let id = this.List[this.current].id;
				console.log(id);
				this.$request("worker/setArtPhoto", {
					id
				}).then(res => {
					console.log(res);
				})
			},
			// 删除图片
			delPic() {
				let id = this.List[this.current].id;
				// //console.log(this.current,id);
				this.$request("worker/delPhoto", {
					id
				}).then(res => {
					console.log(res);
					this.showPhoto();
				});
			},
			// 预览图片
			preview(item, index1) {
				this.url = item.url;
				this.current = index1;
				this.show = true;
			},


			checkMediaType(url) {
				// 创建URL对象
				var link = new URL(url);
				// 获取路径部分（去除参数）
				var path = link.pathname;
				// 获取路径的最后一个点之后的内容作为文件扩展名
				var extension = path.split('.').pop().toLowerCase();
				// 声明支持的图片和视频文件扩展名
				var imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
				var videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];
				// 判断文件扩展名是否在图片扩展名数组中
				if (imageExtensions.includes(extension)) {
					return 'image';
				}
				// 判断文件扩展名是否在视频扩展名数组中
				if (videoExtensions.includes(extension)) {
					return 'video';
				}
				// 扩展名不在图片或视频数组中，返回null表示无法确定媒体类型
				return null;
			},

			// 例子：判断链接是否为图片
			// var url = 'https://example.com/image.jpg?param1=value1&param2=value2';
			// var mediaType = checkMediaType(url);
			// if (mediaType === 'image') {
			//   console.log('这是一个图片链接');
			// } else if (mediaType === 'video') {
			//   console.log('这是一个视频链接');
			// } else {
			//   console.log('这个链接无法确定媒体类型');
			// }









			// 展示图片
			showPhoto() {
				this.$request("worker/myPhotos").then(res => {
					this.List = res.data
					this.List.forEach(item => {
						item.type = this.checkMediaType(item.url)
					})
					this.List = JSON.parse(JSON.stringify(this.List))
					console.log(this.List, 111111111111111);
				})
			},
			// 上传图片
			uploadPic() {
				this.$request("worker/uploadPhoto", {
					photo: this.src
				}).then(res => {
					console.log(res);
					this.showPhoto();
				})
			},
			// 选择图片
			addPhoto() {
				uni.showLoading({
					mask: true,
					title: '上传中...'
				})
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						// //console.log(res);
						uni.uploadFile({
							url: that.$store.state.baseUrl + "common/up/single",
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								imgPath: res.tempFilePaths[0],
							},
							success(res1) {
								var src = JSON.parse(res1.data).url;
								that.src = src;
								that.uploadPic();
							},
							fail(err) {
								console.log(err)
							}
						});
					}
				});
				uni.hideLoading()
			},
			// 选择视频
			addVideo() {
				uni.showLoading({
					mask: true,
					title: '上传中...'
				})
				let that = this;
				uni.chooseVideo({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.$store.state.baseUrl + "common/up/single",
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								imgPath: res.tempFilePath,
							},
							success(res1) {
								var src = JSON.parse(res1.data).url;
								that.src = src;
								that.uploadPic();
							},
							fail(err) {
								console.log(err)
							}
						});
					}
				});

				uni.hideLoading()
			},
		}
	}
</script>

<style class="scss">

</style>